<!--
 * @Date: 2023-08-31 16:25:19
 * @LastEditTime: 2023-10-08 15:27:45
 * 介绍:
-->
<script lang="ts" setup>
import { fixedDecimals } from "@@/utils/tools/format";
import { sdkWkTransfer } from "@@/sdk/web3Eth";
import useBalanceStore from "@@/store/useBalanceStore";
import { toast } from "@@/hooks/vantHooks";
import useTabPageStore from "@@/store/useTabPageStore";
import { useRactionSheetRef } from "@@/components/rework/RactionSheet/index";
import { _require } from "@@/utils/tools";
import { ComputeAddTaskPlayInfoRes } from "./mix";

const balanceStore = useBalanceStore();
const tabPageStore = useTabPageStore();
const { homeData } = storeToRefs(tabPageStore);
const RactionSheetRef = useRactionSheetRef();

const data = reactive<Partial<ComputeAddTaskPlayInfoRes>>({});

const { t } = useI18n();
async function open(params: ComputeAddTaskPlayInfoRes) {
  Object.assign(data, params);
  await Promise.all([
    balanceStore.findBalance(data.coin),
    balanceStore.findCoinDefaultPrice(data.coin),
  ]);
  RactionSheetRef.value?.open({
    title: t("fa-bu-xing-ren-wu"),
  });
}
const btnLoading = reactive({
  approve: false,
  pay: false,
});

const emit = defineEmits<{
  (e: "playSuccess", v: string): void;
}>();

async function pay() {
  btnLoading.pay = true;
  toast.loading(t("jiao-yi-zhong-qing-bu-yao-tui-chu"));
  const res = await sdkWkTransfer(
    data.coin?.contract_addr!,
    data.amount!,
    data.coin?.format!,
    data.address!
  );
  btnLoading.pay = false;
  toast.close();
  if (!res.status) return;
  RactionSheetRef.value?.close();
  emit("playSuccess", res.data!);
}
const isBadlyOff = computed(
  () => !(Number(data.coin?.balance) >= Number(data.amount))
);
// async function approve() {
//   btnLoading.approve = true;
//   await balanceStore.approve(data.coin!, undefined, data.address!);
//   btnLoading.approve = false;
// }
// const isApprove = computed(
//   () => !balanceStore.checkApprove(data.coin!, data.amount!, data.address)
// );

defineExpose({
  open,
});
</script>
<template>
  <RactionSheet
    :close-on-click-overlay="!btnLoading.approve && !btnLoading.pay"
    ref="RactionSheetRef"
  >
    <VanDivider />
    <div class="PD-md">
      <div class="auto-MT-sm T-S-sm">
        <div class="flex-J-SB">
          <span class="C-T4">{{ $t("zhi-fu-dai-bi") }}</span>
          <span class="C-M1">
            {{ $t("yue") }}{{ fixedDecimals(data.coin?.balance, 2) }}</span
          >
        </div>
        <Ccard class="PD-sm" bg="var(--C-B3)" border-style="none">
          <div class="flex-A-C flex-J-SB">
            <div>{{ data.amount }}</div>
            <div class="flex-A-C">
              <Rimage size="38rem" :src="data.coin?.logo" />
              <span class="ML-xs">{{ data.coin?.code }}</span>
            </div>
          </div>
        </Ccard>
        <Ccard class="PD-sm" bg="var(--C-B2)" border-style="none">
          <div class="flex-A-C flex-J-SB">
            <div class="C-T4">WKC/USDT</div>
            <div>
              {{ fixedDecimals(homeData?.wkc.price, 4) }}
            </div>
          </div>
        </Ccard>
        <Ccard class="PD-sm" bg="var(--C-B2)" border-style="none">
          <div class="flex-A-C flex-J-SB">
            <div class="C-T4">{{ $t("zhiFuJiaZhi") }}</div>
            <div>{{ fixedDecimals(data.usdtAmount, 4) }} USDT</div>
          </div>
        </Ccard>
        <Ccard class="PD-sm" bg="var(--C-B2)" border-style="none">
          <div class="flex-J-SB">
            <div class="C-T3">{{ $t("renWuZiJin") }}</div>
            <div class="C-M1">{{ fixedDecimals(data.form?.capital) }} USDT</div>
          </div>
          <VanDivider class="MT-sm MB-sm" />
          <div class="flex-J-SB">
            <div class="C-T3">{{ $t("boDongBaoXianJin") }}</div>
            <div class="C-M1">{{ fixedDecimals(data.capitalPrice) }} USDT</div>
          </div>
        </Ccard>
        <Ccard class="PD-sm" bg="var(--C-B2)" border-style="none">
          <div class="flex-A-C">
            <Rimage
              size="38rem"
              :src="_require('src/assets/images/icon/checked.svg')"
            />
            <div class="ML-xs">{{ $t("zhongYaoTiShi") }}</div>
          </div>
          <div class="MT-xs C-T3">
            {{
              $t(
                "benCiZhiFuDeJineweiRenWuLvYueBaoZhengJinRuRuoZaiGuiDingShiJianNeiWanChengRenWuBaoZhengJinJiangSuiYongJinYiBingTuiHuiWeiAnShiWanChengHuoZheWeiGuiCaoZuoZheBaoZhengJinJiangBuChangGeiCiRenWuFaBuZhe"
              )
            }}
          </div>
        </Ccard>
      </div>

      <div class="MT-md flex-J-SB" style="gap: var(--gap-md)">
        <Rbutton
          @click="RactionSheetRef?.close"
          :size="'large'"
          bg="var(--C-M1-O3)"
        >
          {{ $t("qu-xiao") }}
        </Rbutton>
        <!-- <Rbutton
          :loading="btnLoading.approve"
          @click="approve"
          v-if="isApprove"
          :size="'large'"
          bg="var(--C-LG1)" borderStyle="none"
        >
          {{ $t("pi-zhun") }}{{ data.coin?.code }}
        </Rbutton> -->
        <Rbutton
          :disabled="isBadlyOff"
          :loading="btnLoading.pay"
          @click="pay"
          :size="'large'"
          bg="var(--C-LG1)" borderStyle="none"
        >
          <div v-if="isBadlyOff">
            {{ $t("yu-e-bu-zu") }}
          </div>
          <div v-else>{{ $t("que-reng-zhi-fu") }}</div>
        </Rbutton>
      </div>
    </div>
  </RactionSheet>
</template>
<style lang="scss" scoped></style>
